// 减小弹出菜单的项目高度
.el-menu--popup {
  .el-menu-item {
    height: 36px;
    line-height: 36px;
  }

  .el-submenu__title {
    height: 36px;
    line-height: 36px;
  }

  i.iconfont {
    font-size: 18px;
  }
}

// 整体框架结构
.cs-layout-header-aside-group {
  height: 100%;
  width: 100%;
  min-width: 900px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  // 背景上面的半透明遮罩
  .cs-layout-header-aside-mask {
    @extend %full;
  }

  // 内容层
  .cs-layout-header-aside-content {
    @extend %full;

    .cs-theme-header {
      height: 60px;

      .cs-theme-header-menu {
        overflow: hidden;

        &.is-scrollable {
          position: relative;
          padding: 0 20px;

          .cs-theme-header-menu__prev, .cs-theme-header-menu__next {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
          }
        }

        .cs-theme-header-menu__content {
          overflow: hidden;

          .cs-theme-header-menu__scroll {
            white-space: nowrap;
            position: relative;
            -webkit-transition: -webkit-transform .3s;
            transition: -webkit-transform .3s;
            transition: transform .3s, -webkit-transform .3s;
            float: left;
          }
        }

        .cs-theme-header-menu__prev, .cs-theme-header-menu__next {
          height: 60px;
          position: absolute;
          top: 0;
          font-size: 20px;
          cursor: pointer;
          display: none;
        }

        .cs-theme-header-menu__prev {
          left: 0;
          border-top-left-radius: 2px;
          border-bottom-left-radius: 2px;
        }

        .cs-theme-header-menu__next {
          right: 0;
          border-top-right-radius: 2px;
          border-bottom-right-radius: 2px;
        }
      }
    }

    .cs-theme-container {
      .cs-theme-container-aside {
        position: relative;

        .cs-layout-header-aside-menu-side {
          @extend %full;
          overflow: hidden;
        }
      }

      .cs-theme-container-transition {
        transition: width .3s;
      }

      .cs-theme-container-main {
        padding: 0;
        position: relative;
        overflow: hidden;

        .cs-theme-container-main-layer {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }

        .cs-theme-container-main-body {
          position: relative;
        }
      }
    }
  }
}

// 主题公用
.cs-layout-header-aside-group {
  &.grayMode {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
  }

  // 主体
  .cs-layout-header-aside-content {
    // [布局] 顶栏
    .cs-theme-header {
      // logo区域
      .logo-group {
        float: left;
        text-align: center;

        img {
          height: 60px;
        }
      }

      .logo-transition {
        transition: width .3s;
      }

      // 折叠侧边栏切换按钮
      .toggle-aside-btn {
        float: left;
        height: 60px;
        width: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        @extend %unable-select;

        i {
          font-size: 22px;
          margin-top: 4px;
        }
      }

      // [菜单] 顶栏
      .el-menu {
        float: left;
        border-bottom: none;
        background-color: transparent;

        %header-menu-item {
          @extend %unable-select;

          i.el {
            font-size: 16px;
            margin-right: 0;
          }

          i.iconfont {
            font-size: 20px;
            line-height: 0;
            margin-right: 0;
          }
        }

        .el-menu-item {
          @extend %header-menu-item;
          padding: 0 15px;
          border-bottom: none;
        }

        .el-submenu {
          @extend %header-menu-item;

          .el-submenu__title {
            border-bottom: none;
          }
        }
      }

      // 顶栏右侧的按钮
      .cs-header-right {
        float: right;
        height: 60px;
        display: flex;
        align-items: center;

        .btn-text {
          padding: 5px 8px;
          border-radius: 4px;
          margin: 0 !important;

          &.el-color-picker.el-color-picker--mini {
            padding: 9px 6px;
          }

          i {
            font-size: 18px;
          }
        }

        .el-dropdown {
          @extend %unable-select;
        }
      }
    }

    // [布局] 顶栏下面
    .cs-theme-container {
      // 侧边栏
      .cs-theme-container-aside {
        %cs-theme-container-aside-menu-icon {
          width: 20px;
          text-align: center;
          font-size: 16px;
        }

        // [菜单] 正常状态
        .el-menu {
          @extend %unable-select;
          background-color: transparent;
          border-right: none;

          .el-menu-item {
            i {
              @extend %cs-theme-container-aside-menu-icon;
            }

            .iconfont {
              font-size: 20px;
            }
          }
        }

        .el-submenu {
          @extend %unable-select;

          .el-submenu__title {
            i {
              @extend %cs-theme-container-aside-menu-icon;
            }

            .iconfont {
              font-size: 20px;
            }
          }
        }

        // 菜单为空的时候显示的信息
        .cs-layout-header-aside-menu-empty {
          height: 160px;
          margin: 0 10px 10px;
          border-radius: 4px;
          @extend %unable-select;

          i {
            font-size: 32px;
            margin-bottom: 10px;
          }

          span {
            font-size: 14px;
          }
        }

        // [菜单] 折叠状态
        .el-menu--collapse {
          background-color: transparent;

          .el-submenu__title {
            text-align: center;
          }
        }
      }

      // 右下 主体
      .cs-theme-container-main {
        // 主体部分分为多页面控制器 和主体
        .cs-theme-container-main-header {
          height: 41px;
          // 多页面控制器
          .cs-multiple-page-control-group {
            padding-right: 20px;

            .cs-multiple-page-control-content {
              overflow: auto;
              position: relative;

              .cs-multiple-page-control-content-inner {
                .cs-multiple-page-control {
                  .el-tabs__header.is-top {
                    margin: 0;
                  }

                  .el-tabs__nav {
                    overflow: hidden;
                  }
                }
              }
            }

            .cs-multiple-page-control-btn {
              position: relative;
              bottom: -1px;

              .el-dropdown {
                .el-button-group {
                  .el-button:first-child {
                    border-bottom-left-radius: 0;
                  }

                  .el-button:last-child {
                    border-bottom-right-radius: 0;
                  }
                }
              }
            }
          }
        }

        // 主体
        .cs-theme-container-main-body {
          // 布局组件
          .container-component {
            @extend %full;
            overflow: hidden;
            // 填充式布局组件
            .cs-container-full {
              position: absolute;
              top: 0;
              right: 20px;
              bottom: 0;
              left: 0;
              display: flex;
              flex-direction: column;
              overflow: hidden;

              .cs-container-full__header {
                padding: 20px;
                background: #FFF url('https://zh-static.oss-accelerate.aliyuncs.com/image/background.png') no-repeat;
              }

              .cs-container-full__body {
                flex-grow: 1;
                height: 100%;
                overflow: auto;
                position: relative;
              }

              .cs-container-full__footer {
                padding: 20px;
              }
            }

            // 填充式布局组件 - 滚动优化
            .cs-container-full-bs {
              position: absolute;
              top: 0;
              right: 20px;
              bottom: 0;
              left: 0;
              display: flex;
              flex-direction: column;
              overflow: hidden;

              .cs-container-full-bs__header {
                padding: 20px;
              }

              .cs-container-full-bs__body {
                flex-grow: 1;
                overflow: hidden;
                position: relative;

                .cs-container-full-bs__body-wrapper-inner {
                  padding: 20px;
                  position: relative;
                }
              }

              .cs-container-full-bs__footer {
                padding: 20px;
              }
            }

            // 隐形布局组件
            .cs-container-ghost {
              position: absolute;
              top: 0;
              right: 20px;
              bottom: 0;
              left: 0;
              display: flex;
              flex-direction: column;
              overflow: hidden;

              .cs-container-ghost__header {
                padding: 20px;
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
              }

              .cs-container-ghost__body {
                flex-grow: 1;
                overflow: auto;
                position: relative;
              }

              .cs-container-ghost__footer {
                padding: 20px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
              }
            }

            // 隐形布局组件 - 滚动优化
            .cs-container-ghost-bs {
              position: absolute;
              top: 0;
              right: 20px;
              bottom: 0;
              left: 0;
              display: flex;
              flex-direction: column;
              overflow: hidden;

              .cs-container-ghost-bs__header {
                padding: 20px;
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
              }

              .cs-container-ghost-bs__body {
                flex-grow: 1;
                overflow: hidden;
                position: relative;
              }

              .cs-container-ghost-bs__footer {
                padding: 20px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
              }
            }

            // 卡片式布局组件
            .cs-container-card {
              position: absolute;
              top: 0;
              right: 20px;
              bottom: 0;
              left: 0;
              display: flex;
              flex-direction: column;
              overflow: hidden;

              .cs-container-card__header {
                padding: 20px;
              }

              .cs-container-card__body {
                flex-grow: 1;
                overflow: auto;

                .cs-container-card__body-card {
                  position: relative;
                  margin-bottom: 20px;
                  padding: 20px;
                  border-bottom-left-radius: 4px;
                  border-bottom-right-radius: 4px;
                }
              }

              .cs-container-card__footer {
                padding: 20px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
              }
            }

            // 卡片式布局组件 - 滚动优化
            .cs-container-card-bs {
              position: absolute;
              top: 0;
              right: 20px;
              bottom: 0;
              left: 0;
              display: flex;
              flex-direction: column;
              overflow: hidden;

              .cs-container-card-bs__header {
                padding: 20px;
              }

              .cs-container-card-bs__body {
                position: relative;
                flex-grow: 1;
                overflow: hidden;

                .cs-container-card-bs__body-wrapper-inner {
                  padding-bottom: 20px;
                }

                .cs-container-card-bs__body-card {
                  position: relative;
                  padding: 20px;
                  border-bottom-left-radius: 4px;
                  border-bottom-right-radius: 4px;
                }
              }

              .cs-container-card-bs__footer {
                padding: 20px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
              }
            }
          }
        }
      }
    }
  }
}
